@charset 'utf-8';
$font-size:40px;
@function c($px) {
    @return ($px/$font-size)*1rem;
}
html {
    font-size: $font-size;
}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    background-size:100% 100% ;
    position: relative;
    .musicbutton{
        text-align: center;
        width: c(50px);
        height: c(50px);
        position: absolute;
        top: c(20px);
        right: c(30px);
        background: #E7C598;
        line-height: c(50px);
        border-radius: 50%;
        animation: mu 4s infinite;
        @-webkit-keyframes mu {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(360deg);
            }
        }
        .iconfont{
            display: block;
            font-size: c(35px);
            color: #BF0C21;
            animation: music 4s infinite;
        }
    }
    p{
        padding: 0 c(20px);
    }
    .one{
        font-size: c(30px);
        color: #E7C598;
        padding-top:c(25px) ;
        padding-bottom: c(5px);
    }
    .two{
        font-size: c(20px);
        color: #E7C598;
    }
    .img{
        display: block;
        width: c(320px);
        height: c(45px);
        position: absolute;
        left: 50%;
        bottom: c(43px);
        transform: translateX(-50%);
        
        img{
            width: 100%;
            height: 100%;
        }
    }
    .return{
        width: c(41px);
        height: c(41px);
        border-radius: 50%;
        background: #e7c598;
        text-align: center;
        line-height: c(41px);
        position: absolute;
        right: c(56px);
        bottom: c(25px);

        .iconfont{
            font-size: c(28px);
            color: #bf0c21;
        }
    }
} 
@media  only screen and (min-width:321px) and (max-width:414px){
    .web p {
    padding:0 c(40px); 
    }
    .web .one {
    font-size:c(32px);
    }
  .web .two {
    font-size: c(22px);
    }
}

